<template>
  <div class="tabar">
    <div>
      <div>好又多电商管理系统</div>
      <div>
        <el-icon @click="outCollapse">
          <Menu />
        </el-icon>
      </div>
    </div>
    <div>
      <el-dropdown @command="outLogin">
        <span class="el-dropdown-link">
          <div class="title">
            <p class="A">{{ userName }}</p>
            <el-icon color="#fff">
              <ArrowDownBold />
            </el-icon>
          </div>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="1">返回首页</el-dropdown-item>
            <el-dropdown-item command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>
  
<script setup lang='ts'>
import router from '@/router/index';
import Cookies from 'js-cookie';
import { useAdminState } from '@/store/modules/adminUser'
const useState = useAdminState()
function outCollapse() {
  console.log(111);
  useState.Collapse(useState.isCollapse)
}

const userName = Cookies.get("username")
function outLogin(command: string | number | object) {
  if (command == "1") {
    router.push("/index")
  } else {
    Cookies.remove('token');
    Cookies.remove("username");
    router.push("/login")
  }

}

</script>
  
<style>
.tabar {
  height: 71px;
  background-color: #409eff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding-left: 20px;
}

.tabar div {
  font-size: 26px;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabar :nth-child(2) div {
  font-size: 16px;
  margin-right: 10px;
}

.A {
  margin-right: 10px;
  color: #fff;
  font-size: 16px;
}
</style>